<template>
  <view class="container">
    <!-- 公司信息 -->
    <view class="company-info card">
      <view class="title">佛山市某某网络科技有限公司</view>
      <view class="detail">未融资 20-99人·企业服务</view>
      <view class="detail">🔍 上午09:00—下午18:00 💤 双休</view>
      <view class="detail">🔍 弹性工作</view>
    </view>

    <view class="company-info card">
		<view class="sub-title">公司地址</view>
      <view class="detail">北京海淀区xx生态园永恒生态区A区7号楼707</view>
    </view>

    <!-- 公司介绍和在招职位切换 -->
    <view class="card">
      <view class="tabs">
        <view
          class="tab"
          :class="{ active: currentTab === 'intro' }"
          @click="switchTab('intro')"
        >
          公司介绍
        </view>
        <view
          class="tab"
          :class="{ active: currentTab === 'jobs' }"
          @click="switchTab('jobs')"
        >
          在招职位
        </view>
      </view>

      <!-- 公司介绍内容 -->
      <view v-if="currentTab === 'intro'" class="tab-content">
        <view class="detail">
          {{ showFullIntro ? fullIntro : shortIntro }}
        </view>
        <view class="more-link" @click="toggleIntro">
          {{ showFullIntro ? "收起" : "查看更多" }}
        </view>
      </view>

      <!-- 在招职位内容 -->
      <view v-if="currentTab === 'jobs'" class="tab-content">
        <view class="detail">在招职位列表：</view>
        <view class="job-list">
          <view v-for="(job, index) in jobs" :key="index" class="job-item">
            {{ job }}
          </view>
        </view>
      </view>
    </view>

    <!-- 公司视频和公司相册切换 -->
    <view class="card">
      <view class="tabs">
        <view
          class="tab"
          :class="{ active: currentMediaTab === 'video' }"
          @click="switchMediaTab('video')"
        >
          公司视频
        </view>
        <view
          class="tab"
          :class="{ active: currentMediaTab === 'album' }"
          @click="switchMediaTab('album')"
        >
          公司相册
        </view>
      </view>

      <!-- 视频展示 -->
      <view v-if="currentMediaTab === 'video'" class="tab-content">
        <scroll-view class="media-scroll" scroll-x>
          <view class="media-row">
            <video
              v-for="(video, index) in videos"
              :key="index"
              :src="video"
              controls
              class="media-item"
            ></video>
          </view>
        </scroll-view>
      </view>

      <!-- 相册展示 -->
      <view v-if="currentMediaTab === 'album'" class="tab-content">
        <scroll-view class="media-scroll" scroll-x>
          <view class="media-row">
            <image
              v-for="(image, index) in albumImages"
              :key="index"
              :src="image"
              class="media-item"
            ></image>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 公司领导 -->
    <view class="card">
      <view class="sub-title">公司领导</view>
      <scroll-view class="leader-scroll" scroll-x>
        <view class="leader-row">
          <view
            v-for="(leader, index) in leaders"
            :key="index"
            class="leader-item"
          >
            <view class="leader-name">{{ leader.name }}</view>
            <view class="leader-position">{{ leader.position }}</view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 工商信息 -->
    <view class="business-info card">
      <view class="sub-title">工商信息</view>
      <view class="info-table">
        <view class="info-row">
          <view class="info-label">公司全称</view>
          <view class="info-value">北京阿的江阿凡达上的官方回顾</view>
        </view>
        <view class="info-row">
          <view class="info-label">法定代表人</view>
          <view class="info-value">牛大胆</view>
        </view>
        <view class="info-row">
          <view class="info-label">注册资本</view>
          <view class="info-value">123334.111万人名币</view>
        </view>
        <view class="info-row">
          <view class="info-label">成立日期</view>
          <view class="info-value">2023.12.12</view>
        </view>
        <view class="info-row">
          <view class="info-label">经营状态</view>
          <view class="info-value">存续</view>
        </view>
        <view class="info-row">
          <view class="info-label">统一编号</view>
          <view class="info-value">123456721345</view>
        </view>
      </view>
    </view>

    <!-- 公司评论 -->
    <view class="comments card">
      <view class="sub-title">公司评论</view>
      <view class="comment-link" @click="navigateToComments">
        共有 {{ commentCount }} 条评论
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      commentCount: 5, // 假设有5条评论
      showFullIntro: false, // 是否展开公司介绍
      currentTab: "intro", // 当前选中的tab（公司介绍/在招职位）
      shortIntro: `1. 参与公司SAAS平台产品的整体设计和产品规划。
        2. 参与公司SAAS平台和公司产品需求管理，完成需求分析和需求文档编写。
        3. 负责根据产品需求设计输出产品数据ER图。
        4. 负责独立设计产品原型，编写PRD等产品文档。
        5. 在整个研发周期中，密切配合研发规划并推进产...`, // 简短的介绍
      fullIntro: `
        1. 参与公司SAAS平台产品的整体设计和产品规划。
        2. 参与公司SAAS平台和公司产品需求管理，完成需求分析和需求文档编写。
        3. 负责根据产品需求设计输出产品数据ER图。
        4. 负责独立设计产品原型，编写PRD等产品文档。
        5. 在整个研发周期中，密切配合研发规划并推进产xxxx
        6. xxxxxxxxxxxxxxxxxxxx
        7. xxxxxxxxxxxxxxxxxxc
      `, // 完整的介绍
      jobs: [
        "产品经理",
        "前端开发工程师",
        "后端开发工程师",
        "UI设计师",
        "测试工程师",
      ], // 在招职位列表
      currentMediaTab: "video", // 当前选中的媒体tab（视频/相册）
      videos: [
		  "https://example.com/video1.mp4",
		  "https://example.com/video2.mp4",
		], // 视频列表
		albumImages: [
		  "https://example.com/image1.jpg",
		  "https://example.com/image2.jpg",
		], // 图片列表
      leaders: [
        { name: "牛大胆", position: "CEO" },
        { name: "牛大胆", position: "产品负责人" },
        { name: "牛大胆", position: "人事专员" },
        { name: "牛大胆", position: "HR" },
        { name: "牛大胆", position: "CEO" },
        { name: "牛大胆", position: "产品负责人" },
        { name: "牛大胆", position: "人事专员" },
        { name: "牛大胆", position: "HR" },
      ], // 公司领导列表
    };
  },
  methods: {
    // 跳转到评论列表页面
    navigateToComments() {
      uni.navigateTo({
        url: "/pages/enterprise/comments", // 评论列表页面的路径
      });
    },
    // 切换公司介绍展开/收起
    toggleIntro() {
      this.showFullIntro = !this.showFullIntro;
    },
    // 切换公司介绍和在招职位
    switchTab(tab) {
      this.currentTab = tab;
    },
    // 切换公司视频和公司相册
    switchMediaTab(tab) {
      this.currentMediaTab = tab;
    },
  },
};
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #f9f9f9;
}

.card {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 10px;
  border-radius: 5px;
}

.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.detail {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.more-link {
  color: #007aff;
  cursor: pointer;
  text-align: left;
}

.sub-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.tabs {
  display: flex;
  border-bottom: 1px solid #ddd;
  margin-bottom: 10px;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 10px;
  cursor: pointer;
  color: #666;
}

.tab.active {
  color: #007aff;
  border-bottom: 2px solid #007aff;
}

.media-scroll {
  white-space: nowrap;
}

.media-row {
  display: inline-flex;
  gap: 10px;
}

.media-item {
  width: 200px;
  height: 150px;
  background-color: #ddd;
  border-radius: 5px;
}

.leader-scroll {
  white-space: nowrap;
}

.leader-row {
  display: inline-flex;
  /* gap: 10px; */
}

.leader-item {
  width: 55px;
  margin-right: 20px;
  border-radius: 5px;
  text-align: center;
}

.leader-name {
  font-weight: bold;
}

.leader-position {
  color: #666;
  font-size: 12px;
}

.comment-link {
  color: #007aff;
  text-decoration: underline;
  cursor: pointer;
}

.job-list {
  margin-top: 10px;
}

.job-item {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
}
</style>